<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>景点统计分析-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="{{url_for('static',filename='css/font.css')}}">
    <link rel="stylesheet" href="{{url_for('static',filename='css/xadmin.css')}}">
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{url_for('static',filename='lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/xadmin.js')}}"></script>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">景点分析</a>
        <a><cite>区域统计</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon">ဂ</i>
    </a>
</div>

<!-- 搜索表单 -->
<div class="layui-form layui-form-pane" style="margin:15px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">省份</label>
            <div class="layui-input-inline">
                <select name="province" lay-filter="province" id="province" lay-search>
                    <option value="">全部省份</option>
                </select>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="city" id="city" lay-search>
                        <option value="">全部城市</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn" >查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>

<!-- 数据表格 -->
<div class="x-body">
    <table id="statTable" lay-filter="statTable"></table>
</div>

<script>
layui.use(['table', 'form', 'jquery'], function(){
    var table = layui.table;
    var form = layui.form;
    var $ = layui.$; // 使用 Layui 自带的 $

    // 确保在 DOM 加载完成后执行
    $(document).ready(function() {
        // 初始化省份下拉框
        $.ajax({
            url: "{{ url_for('menu2.selectallProvince') }}",
            type: "POST",
            success: function(res){
                if(res.code === 0) {
                    var html = '<option value="">选择省份</option>';
                    res.data.forEach(function(province){
                        html += '<option value="'+province+'">'+province+'</option>';
                    });
                    $('#province').html(html);
                    form.render('select');
                } else {
                    layer.msg(res.msg);
                }
            }
        });

        // 省份选择事件
        form.on('select(province)', function(data){
            if(data.value){
                $.ajax({
                    url: "{{ url_for('menu2.selectallCityByProvince') }}",
                    type: "POST",
                    data: {province: data.value},
                    success: function(res){
                        if(res.code === 0) {
                            var html = '<option value="">选择城市</option>';
                            res.data.forEach(function(city){
                                html += '<option value="'+city+'">'+city+'</option>';
                            });
                            $('#city').html(html);
                            form.render('select');
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
            } else {
                $('#city').html('<option value="">选择城市</option>');
                form.render('select');
            }
        });

        // 渲染统计表格
        table.render({
            elem: '#statTable',
            id:'statTable',
            url: "{{ url_for('menu2.get_region_stats') }}",
            method: 'GET',
            toolbar: true,
            page: true,
            limits: [10, 20, 50],
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'province', title: '省份', width: 120},
                {field: 'city', title: '城市', width: 120},
                {field: 'attraction_count', title: '景点数量', width: 120, sort: true},
                {field: 'total_sales', title: '总销量', width: 150, sort: true,
                 templet: function(d){return d.total_sales.toLocaleString();}},
                {field: 'high_grade_count', title: '4A/5A数量', width: 150, sort: true},
                {field: 'avg_price', title: '平均价格', width: 150, sort: true,
                 templet: function(d){return '¥'+d.avg_price.toFixed(2);}}
            ]],
            parseData: function(res){
                console.log("Parsed data:", res); // 打印返回的数据
                if(res.code !== 0) {
                    layer.msg(res.msg);
                    return {code: res.code,
                            msg: res.msg,
                            count: 0,
                            data: []};    //修改了return {code: 1};
                }
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            },
            done: function(res){
                console.log("Rendered data:", res); // 打印返回的数据
                if(res.code === 0 && res.stats) {
                    $('#count-card').text(res.count);
                    $('#sales-card').text(res.stats.total_sales.toLocaleString());
                    $('#high-grade-card').text(res.stats.high_grade_count);
                    $('#price-card').text('¥'+res.stats.avg_price.toFixed(2));
                }
            }
        });

        // 搜索按钮点击事件
        form.on('submit(searchBtn)', function(data){
            table.reload('statTable', {
                where: {
                    province: $('#province').val(),
                    city: $('#city').val()
                },
                page: {curr: 1}
            });
            return false; // 阻止表单跳转
        });
    });
});
</script>
</body>
</html>